<template>
  <view class="drag-ball-box" :class="[orientation,{active:!dragMoveSatus}]" id="drag-ball" :style="'left:'+left+'px;top :'+top+'px;'"
    @touchstart="dragStart" @touchmove="dragMove" @touchend="dragEnd">
    <view class="item-group">
      <image class="item-image" src="../../static/logo.png" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
  export default {
    name: "drag_ball",
    props: {

    },
    data: function() {
      return {
        orientation: 'portrait',
        safeArea: {
          minTop: 0,
          maxTop: 0,
          minLeft: 0,
          maxLeft: 0,
          windowWidth: 0,
          windowHeight: 0
        },
        dragMoveSatus: true,
        dragEndInfo: {
          type: null,
          coordinate: null
        },
        width: 0,
        height: 0,
        left: 0,
        top: 0
      }
    },
    created: function() {
      // 横屏
      // this.orientation = 'landscape';
    },
    mounted: function() {
      this.initDragBall();
    },
    methods: {
      // 计算悬浮球初始位置
      initDragBall:function(){
        console.log('initDragBall');
        let that = this;
        try {
          uni.createSelectorQuery().in(this).select('#drag-ball').fields({
            size: true
          }, dragBallSize => {
            that.width = dragBallSize.width;
            that.height = dragBallSize.height;
            uni.getSystemInfo({
              success: function(res) {
                that.safeArea.windowWidth = res.windowWidth;
                that.safeArea.windowHeight = res.windowHeight;
                if (that.orientation === 'landscape') {
                  that.safeArea.minTop = -parseInt(dragBallSize.height / 2);
                  that.safeArea.maxTop = res.windowHeight - parseInt(dragBallSize.height / 2);
                  that.safeArea.minLeft = parseInt(0.06 * res.windowWidth);
                  that.safeArea.maxLeft = parseInt(0.94 * res.windowWidth) - dragBallSize.width;
                  that.left = that.safeArea.minLeft;
                  that.top = that.safeArea.minTop;
                  // that.left = that.safeArea.maxLeft;
                  // that.top = that.safeArea.maxTop;
                } else {
                  that.safeArea.minTop = parseInt(0.06 * res.windowHeight);
                  that.safeArea.maxTop = parseInt(0.94 * res.windowHeight) - dragBallSize.height;
                  that.safeArea.minLeft = -parseInt(dragBallSize.width / 2);
                  that.safeArea.maxLeft = res.windowWidth - parseInt(dragBallSize.width / 2);
                  that.left = that.safeArea.maxLeft;
                  that.top = that.safeArea.minTop;
                  // that.left = that.safeArea.minLeft;
                  // that.top = that.safeArea.maxTop;
                }
                that.showDragBall();
              }
            });
          }).exec();
        } catch (e) {
          //TODO handle the exception
          console.log(e);
        }
      },
      showDragBall: function() {
        setTimeout(function(that) {
          that.dragMoveSatus = false;
        }, 1000, this);
      }
    }
  }
</script>

<script module="dragBall" lang="renderjs">
  export default {
    methods: {
      // 手指触摸悬浮球动作开始
      dragStart: function(event) {
        if (this.orientation === 'landscape') {
          if (this.top === this.safeArea.minTop) {
            this.top += parseInt(this.height / 2); // 上面
          } else if (this.top === this.safeArea.maxTop) {
            this.top -= parseInt(this.height / 2); // 下面
          }
        } else {
          if (this.left === this.safeArea.minLeft) {
            this.left += parseInt(this.width / 2); // 左面
          } else if (this.left === this.safeArea.maxLeft) {
            this.left -= parseInt(this.width / 2); // 右面
          }
        }
      },
      // 手指触摸后移动
      dragMove: function(event) {
        if (!this.dragMoveSatus) {
          this.dragMoveSatus = true;
        }
        // 定位触摸焦点及移动位置
        this.top = event.touches[0].clientY - parseInt(this.height / 2);
        this.left = event.touches[0].clientX - parseInt(this.width / 2);
      },
      // 手指触摸悬浮球动作结束，贴边并延迟隐藏
      dragEnd: function(event) {
        this.dragMoveSatus = false;
        if (this.orientation === 'landscape') {
          let halfWindowHeight = parseInt(this.safeArea.windowHeight / 2),
            halfDragBallHeight = parseInt(this.height / 2);
          this.dragEndInfo.type = 'top';
          if (this.top < halfWindowHeight) {
            this.dragEndInfo.coordinate = this.safeArea.minTop;
            this.top = this.safeArea.minTop + halfDragBallHeight;
          } else {
            this.dragEndInfo.coordinate = this.safeArea.maxTop;
            this.top = this.safeArea.maxTop - halfDragBallHeight;
          }
        } else {
          let halfWindowWidth = parseInt(this.safeArea.windowWidth / 2),
            halfDragBallWidth = parseInt(this.width / 2);
          this.dragEndInfo.type = 'left';
          if (this.left < halfWindowWidth) {
            this.dragEndInfo.coordinate = this.safeArea.minLeft;
            this.left = this.safeArea.minLeft + halfDragBallWidth;
          } else {
            this.dragEndInfo.coordinate = this.safeArea.maxLeft;
            this.left = this.safeArea.maxLeft - halfDragBallWidth;
          }
        }

        // 位置容错计算
        if (this.top < this.safeArea.minTop) {
          this.top = this.safeArea.minTop;
        } else if (this.top > this.safeArea.maxTop) {
          this.top = this.safeArea.maxTop;
        }
        if (this.left < this.safeArea.minLeft) {
          this.left = this.safeArea.minLeft;
        } else if (this.left > this.safeArea.maxLeft) {
          this.left = this.safeArea.maxLeft;
        }

        // 隐藏
        setTimeout(function(that) {
          if(!that.dragMoveSatus){
            that[that.dragEndInfo.type] = that.dragEndInfo.coordinate;
          }
        }, 1500, this);
      }
    }
  }
</script>

<style lang="scss">
  .drag-ball-box {
    position: fixed;
    overflow: hidden;
    border-radius: 50%;
    z-index: 109;

    &.portrait {
      width: 80rpx;
      height: 80rpx;
    }

    &.landscape {
      width: 40rpx;
      height: 40rpx;
    }

    &.active {
      transition: .3s;
    }

    .item-group {
      width: 100%;
      height: 100%;

      .item-image {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
